<!DOCTYPE html>
<html lang="en">

<head> 
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">

    <title>登录</title>
    <!--[if lt IE 9]>
    <meta http-equiv="refresh" content="0;ie.html" />
    <![endif]-->

    <link rel="stylesheet" href="css/bootstrap.min.css?v=3.3.7" >
    <link rel="stylesheet" href="fonts/font-awesome/font-awesome.css">
    <link rel="stylesheet" href="fonts/web-icons/web-icons.css">

    <link href="css/login.css" rel="stylesheet">

    <!-- 全局js -->
    <script src="js/plugins/jquery/jquery.min.js?v=2.1.4"></script>
    <!-- <script src="public/libs/vue.min.js"></script> -->
    <script src="js/plugins/vue/vue.min.js"></script>
    <script src="js/plugins/bootstrap/bootstrap.min.js?v=3.3.6"></script>
    <script src="js/plugins/slimscroll/jquery.slimscroll.min.js"></script>
    <script src="js/plugins/layer/layer.min.js"></script>
</head>

<body class="login-page">

<div class="hold-transition">
    <div id="rrapp" class="login-box">

        <div class="login-logo">
            <b>行业网关管理平台</b>
        </div>

        <div class="login-box-body">
            <p class="login-box-msg">用户登录</p>
            <div v-if="error" class="alert alert-danger alert-dismissible">
                <h4 style="margin-bottom: 0px;"><i class="fa fa-exclamation-triangle"></i> {{errorMsg}}</h4>
            </div>
            <div class="form-group has-feedback">
                <input type="text" class="form-control" v-model="userName" placeholder="账号">
                <span class="glyphicon glyphicon-user form-control-feedback"></span>
            </div>
            <div class="form-group has-feedback">
                <input type="password" class="form-control" v-model="password" placeholder="密码">
                <span class="glyphicon glyphicon-lock form-control-feedback"></span>
            </div>
            <div class="form-group has-feedback">
                <input type="text" class="form-control" v-model="captcha" @keyup.enter="login" placeholder="验证码">
                <span class="glyphicon glyphicon-warning-sign form-control-feedback"></span>
            </div>
            <div class="form-group has-feedback">
                <img alt="如果看不清楚，请单击图片刷新！" class="pointer" :src="src" @click="refreshCode">
                &nbsp;&nbsp;&nbsp;&nbsp;<a href="javascript:;" @click="refreshCode">点击刷新</a>
            </div>

            <div class="row code">
                <div class="col-xs-8">
                    <div class="checkbox icheck">
                    </div>
                </div>
                <!-- /.col -->
                <div class="col-xs-4">
                    <button type="button" class="btn btn-primary btn-block btn-flat" @click="login">登录</button>
                </div>
                <!-- /.col -->
            </div>
        </div>



    </div>
</div>



    <script>
        var vm = new Vue({
            el:'#rrapp',
            data:{
                userName: 'admin',
                password: 'admin',
                captcha: '00000',
                error: false,
                errorMsg: '',
                src: 'captcha.jpg'
            },
            beforeCreate: function(){
                if(self != top){
                    top.location.href = self.location.href;
                }
            },
            methods: {
                refreshCode: function(){
                    this.src = "captcha.jpg?t=" + $.now();
                },
                login: function (event) {
                    var data = "userName="+vm.userName+"&password="+vm.password+"&captcha="+vm.captcha;
                    $.ajax({
                        type: "POST",
                        url: "sys/login",
                        data: data,
                        dataType: "json",
                        success: function(result){
                            if(result.code == 0){//登录成功
                                parent.location.href ='index.html';
                            }else{
                                vm.error = true;
                                vm.errorMsg = result.message;

                                vm.refreshCode();
                            }
                        }
                    });
                }
            }
        });
    </script>
</body>

</html>
